import React, {memo, useEffect, useState} from "react";
import {WELLS_COLUMN, WELLS_ROW} from "../../pages/main/plate/config";
import {useSelector} from "react-redux";

import "./index.css";
import {deepClone} from "../../common/utils";

export default memo(function CallsResultTable(props) {
  const {endPointTable} = props;
  const {data} = useSelector(state => ({
    data: state.dataReducer.data
  }));
  const [wells, setWells] = useState(data.wells);  //  96个孔板对象
  let cloneWells = [];

  useEffect(() => {
    cloneWells = deepClone(wells, cloneWells);
    cloneWells.forEach(item => item.selected = false);
    setWells(cloneWells);
  }, []);

  useEffect(() => {
    let cloneDataWells = [];
    cloneDataWells = deepClone(data.wells, cloneDataWells);
    setWells(cloneDataWells.map(item => ({...item, selected: false})));
  }, [data]);

  return (
    <section className={"callsResultTable"}>
      <div>
        <div/>
        <div>
          {
            WELLS_COLUMN.map((col, index) => <div key={col}>{col}</div>)
          }
        </div>
      </div>
      <div>
        {
          WELLS_ROW.map((row, index) => <div key={row}>{row}</div>)
        }
      </div>
      <div>
        {
          wells.map(well => (
            <div key={well.row * 12 + well.col}>
              <div style={well.sampleName ? {backgroundColor: `${well.sampleColor}`, color: "#fff"} : null}>{well.sampleName}</div>
              <ul>
                {
                  well.targets.map(target => {
                    let thisTarget = endPointTable.find(item =>
                      item.well === WELLS_ROW[well.row] + WELLS_COLUMN[well.col] && item.target === target.name);
                    if (thisTarget?.call === "") {
                      return (<li key={target.name}/>);
                    } else if (thisTarget?.call) {
                      return (<li key={target.name} style={{fontWeight: "bold", color: "#d01935"}}>+</li>);
                    } else {
                      return (<li key={target.name} style={{fontWeight: "bold", color: "#50e33c"}}>-</li>);
                    }
                  })
                }
              </ul>
            </div>
          ))
        }
      </div>
    </section>
  );
});